<template>
  <span class="visual_label">{{props.crt_key}}:</span>
  <div class="visual_right">
    <!-- 数组 -->
    <div v-if="Array.isArray(crt_option)">
      <is-array v-model:data="crt_option" @change="dealChange($event)"></is-array>
    </div>
    <!-- 对象 -->
    <div v-else-if="typeof crt_option === 'object'">
      <is-object v-model:data="crt_option" @change="dealChange($event)"></is-object>
    </div>
    <deal-input v-else v-model:data="crt_option" @change="dealChange($event)"></deal-input>
  </div>
  
</template>

<script setup>
  import IsObject from './IsObject.vue'
  import IsArray from './IsArray.vue'
  import DealInput from './DealInput.vue'
  import { ref,onMounted, watch } from 'vue'

  const props = defineProps({
    crt_option: {
      type: String,
      required: true
    },
    crt_key: {
      type: [String, Number],
      required: true
    }
  })
  let crt_option= ref('')
  const emit = defineEmits(['update:crt_option','change'])
  onMounted(() => {
    crt_option.value = props.crt_option
  })
  // watch(crt_option, (newdata) => {
  //   console.log('judgeDisplay监听到变化：', newdata)
  //   emit('update:crt_option', newdata)
  // })
  const dealChange = (e) => {
    crt_option.value = e
    // console.log('change judgeDisplay 监听到变化：', props.crt_key, e)
    emit('change', e)
  }
</script>

<style lang="less" scoped>

  .visual_label {
    color: #409eff;
    display: inline-block;
    // padding-right:20px;
    // width: 150px;
    font-size: 18px;
  }
  .visual_right {
    flex: 1;
  }
</style>
